<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>商品分类</title>
    <link href="${applicationScope.basePath}/css/bootstrap.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="${applicationScope.basePath}/css/index.css">
    <script src="${applicationScope.basePath}/js/jquery-3.4.1.min.js"></script>
    <script src="${applicationScope.basePath}/js/bootstrap.min.js"></script>
    <link rel="stylesheet" type="text/css" href="${applicationScope.basePath}/css/model.css">
</head>
<body>
<jsp:include page="../header.jsp" flush="true"/>
<div class="container" style="margin-top: 100px;">
    <form action="${applicationScope.basePath}/goods/search" method="get">
        <div class="row">
            <div class="col-md-6 col-md-offset-3">
                <div class="input-group">
                    <input style="border-color: #ff9900;" type="text" name="str" class="form-control input-lg"
                           placeholder="搜索你的二货">
                    <span class="input-group-btn">
                    <button class="btn btn-warning btn-lg" type="submit">搜索</button>
                </span>
                </div>
            </div>
        </div>
    </form>
</div>
<hr style="border-color: #ffc53d"/>
<section id="content">
    <!-- 精选start-->
    <section class="hemai_jx">
        <div class="jx_top">
            <div class="jx_tit">
                <span style="font-size: 20px;">商品分类</span>
            </div>
            <!-- Nav tabs -->
            <ul id="myTab" class="jx_tabs" role="tablist">
                <li role="presentation" class="active">
                    <span><a onclick="showTab(0,'popular',1);" href="#popularity" aria-controls="popularity"
                             role="tab" data-toggle="tab">精选推荐</a></span>
                </li>
                <li role="presentation">
                    <span> <a onclick="showTab(1,'_newest',1);" href="#newest" aria-controls="newest" role="tab"
                              data-toggle="tab">闲置数码</a></span>
                </li>
                <li role="presentation">
                    <span><a onclick="showTab(2,'_theme',1);" href="#theme" aria-controls="theme" role="tab"
                             data-toggle="tab">代步工具</a></span>

                </li>
                <li role="presentation">
                    <span><a onclick="showTab(3,'_electrical',1);" href="#electrical" aria-controls="electrical"
                             role="tab" data-toggle="tab">电器日常</a></span>
                </li>
                <li role="presentation">
                    <span><a onclick="showTab(4,'_books',1);" href="#books" aria-controls="books" role="tab"
                             data-toggle="tab">教材资料</a></span>
                </li>
                <li role="presentation">
                    <span><a onclick="showTab(5,'_clothes',1);" href="#clothes" aria-controls="clothes" role="tab"
                             data-toggle="tab">美妆服饰</a></span>
                </li>
                <li role="presentation">
                    <span><a onclick="showTab(6,'_chess',1);" href="#chess" aria-controls="chess" role="tab"
                             data-toggle="tab">运动棋牌</a></span>
                </li>
                <li role="presentation">
                    <span> <a onclick="showTab(7,'_other',1);" href="#other" aria-controls="other" role="tab"
                              data-toggle="tab">其他</a></span>
                </li>
            </ul>
        </div>
        <!--        主体-->
        <div class="jx_content">
            <!-- Tab panes -->
            <div class="tab-content">
                <div role="tabpanel" class="tab-pane active" id="popularity">
                    <div id="popular" class="row">
                        <c:forEach items="${requestScope.info.list}" var="item" varStatus="vs">
                            <div class="col-md-3" style="margin-bottom: 10px;">
                                <div class="demo">
                                    <a href="${applicationScope.basePath}/goods/detail/${item.goods.id}">
                                        <img style="height: 250px;"
                                             src="${applicationScope.imgPath}/${item.imageList[0].imgUrl}"
                                             alt="">
                                        <div class="has_border">
                                            <h3>${item.goods.name}</h3>
                                            <h5>${item.goods.describle}</h5>
                                            <div class="price">
                                                <span>售价<em>￥</em><strong>${item.goods.price}</strong><em>元</em></span>
                                                <span style="float: right;margin-top: 7px;margin-right: 5px;">${item.goods.start_time}</span>
                                            </div>
                                        </div>
                                    </a>
                                </div>
                            </div>
                        </c:forEach>
                    </div>
                </div>
                <div role="tabpanel" class="tab-pane fade" id="newest">
                    <div id="_newest" class="row">

                    </div>
                </div>
                <div role="tabpanel" class="tab-pane fade" id="theme">
                    <div id="_theme" class="row">

                    </div>
                </div>
                <div role="tabpanel" class="tab-pane fade" id="electrical">
                    <div id="_electrical" class="row">

                    </div>
                </div>
                <div role="tabpanel" class="tab-pane fade" id="books">
                    <div id="_books" class="row">

                    </div>
                </div>
                <div role="tabpanel" class="tab-pane fade" id="clothes">
                    <div id="_clothes" class="row">

                    </div>
                </div>
                <div role="tabpanel" class="tab-pane fade" id="chess">
                    <div id="_chess" class="row">

                    </div>
                </div>
                <div role="tabpanel" class="tab-pane fade" id="other">
                    <div id="_other" class="row">

                    </div>
                </div>
                <div role="tabpanel" class="tab-pane fade" id="need">
                    <div id="_need" class="row">

                    </div>
                </div>
            </div>
        </div>
        <!--    分页-->
        <div class="text-center">
            <ul id="pageSelected" class="pagination">
                <c:if test="${requestScope.info.total != 0}">
                    <li id="firstPage"><a onclick="return showTab(0,'popular',1);" href="#">首页</a></li>
                    <li id="prePage"><a onclick="return showTab(0,'popular',${requestScope.info.prePage});" href="#">上一页</a>
                    </li>
                    <c:forEach items="${requestScope.info.navigatepageNums}" var="num" varStatus="vs">
                        <li><a onclick="return showTab(0,'popular',${num});" href="#">${num}</a></li>
                    </c:forEach>
                    <li id="nextPage"><a onclick="return showTab(0,'popular',${requestScope.info.nextPage});"
                                         href="#">下一页</a></li>
                    <li id="lastPage"><a onclick="return showTab(0,'popular',${requestScope.info.pages});" href="#">尾页</a>
                    </li>
                    <label style="margin: 3px 0 0 10px;font-size: 18px;font-weight: normal;color: #9d9d9d;">共<span
                            style="color: red;">${requestScope.info.pages}</span>页,<span
                            style="color: red;">${requestScope.info.total}</span>条记录</label>
                </c:if>
            </ul>
        </div>
    </section>
</section>
<footer>
    <hr/>
    <p style="text-align: center;">&copy; 二手交易平台 2020</p>
</footer>
<script>
    /*发送ajax请求，附带分类标识*/
    function showTab(cId, _id, pn) {
        $.ajax({
            url: "${applicationScope.basePath}/goods/category/" + cId + "/" + pn,
            type: "POST",
            dataType: "json",
            contentType: "application/json;charset=UTF-8",
            success: function (data) {
                // alert(JSON.stringify(data));
                let d = '#' + _id;
                $(d).empty();
                let goods;
                let images;
                $.each(data.list, function (key, value) {
                    goods = value.goods;
                    images = value.imageList;
                    $(d).append("<div class=\"col-md-3\" style=\"margin-bottom: 10px;\">\n" +
                        "                                <div class=\"demo\">\n" +
                        "                                    <a href=\"${applicationScope.basePath}/goods/detail/" + goods.id + "\">\n" +
                        "                                        <img style=\"height: 250px;\" src=\"${applicationScope.imgPath}/" + images[0].imgUrl + "\" alt=\"\">\n" +
                        "                                        <div class=\"has_border\">\n" +
                        "                                            <h3>" + goods.name + "</h3>\n" +
                        "                                            <h5>" + goods.describle + "</h5>\n" +
                        "                                            <div class=\"price\">\n" +
                        "                                                <span>售价<em>￥</em><strong>" + goods.price + "</strong><em>元</em></span>\n" +
                        "                                                <span style=\"float: right;margin-top: 7px;margin-right: 5px;\">" + goods.start_time + "</span>\n" +
                        "                                            </div>\n" +
                        "                                        </div>\n" +
                        "                                    </a>\n" +
                        "                                </div>\n" +
                        "                            </div>");
                });
                $("#pageSelected").empty();
                $("#pageSelected").append('<li id="firstPage"><a onclick="return showTab(' + cId + ',\'' + _id + '\',1);" href="#">首页</a></li>\n' +
                    '                <li id="prePage"><a onclick="return showTab(' + cId + ',\'' + _id + '\',' + data.prePage + ');" href="#">上一页</a></li>');
                $.each(data.navigatepageNums, function (i, n) {
                    $("#pageSelected").append(' <li><a onclick="return showTab(' + cId + ',\'' + _id + '\',' + n + ');" href="#">' + n + '</a></li>');

                });
                $("#pageSelected").append('<li id="nextPage"><a onclick="return showTab(' + cId + ',\'' + _id + '\',' + data.nextPage + ');" href="#">下一页</a></li>\n' +
                    '                <li id="lastPage"><a onclick="return showTab(' + cId + ',\'' + _id + '\',' + data.pages + ');" href="#">尾页</a></li>\n' +
                    '                <label style="margin: 3px 0 0 10px;font-size: 18px;font-weight: normal;color: #9d9d9d;">共<span\n' +
                    '                        style="color: red;">' + data.pages + '</span>页,<span\n' +
                    '                        style="color: red;">' + data.total + '</span>条记录</label>');
            },
            error: function () {
                //跳转到错误页面
            }
        });
        return false;
    }
</script>
</body>
</html>
